<template>
	<navbar></navbar>
	<view class="chatPage">
		<view class="top">
			<view class="top-vw">
				<van-icon name="arrow-left" size="20px" />
					<view class="title">
						{{user.nickname}}
						<view class="title-text">
							<text>湖南</text>
							<text class="title-text-two">遂州</text>
							<text>剩余追问0次</text>
						</view>
					</view>
					<view class="top-button">
						<van-button icon="add-o" round  type="info" size="mini" color="#036faf">收藏</van-button>
					</view>
				</view>
		</view>
		<view class="content">
			<scroll-view id="scroll-view" scroll-y="true" :scroll-top="scrollTop" class="scroll-Y" @scrolltoupper="upper"
				@scroll="scroll" ref="scrollto">
				<view v-for="(item, index) in messageList" :key="index">
					<view class="item_name2" v-if="item.intype === 1">
						<image class="itemimage" src="../../../static/头像.png" mode=""></image>
						<text class="item_txt2">{{ item.msn }}</text>
					</view>
					<view class="item_name1" v-if="item.intype === '1'">
						<image class="itemimage" :src="user.avatar ? user.avatar : ''" mode=""></image>
						<text class="item_txt1">{{ item.msn }}</text>
					</view>
					<view class="item_name1" v-if="item.intype === '2'">
						<image class="itemimage" :src="user.avatar ? user.avatar : ''" mode=""></image>
						<image v-if="item.msn" class="image2" :src="user.msn" mode=""></image>
						<text class="item_txt1">{{ item.msn }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fixed-container">
			<view class="fixed-container-vw">
				<input class="uni-input" type="text" :value="sms" placeholder="请输入" @confirm="inputHandler" />
			</view>
			<view class="fixed-container-icon" @click="opens">
				<van-icon name="add-o" size="30px" />
			</view>
		</view>
		<image class="dashang" src="../../../static/钱包-钱包@1x.png" mode="" @click="openshang"></image>
	</view>
	<van-toast id="van-toast" />
	<van-popup
	  :show="open"
		round
	  closeable
	  position="bottom"
		close-icon="close"
	  custom-style="height: 20%; background: #EDEDED;"
	  @close="onClose">
		<view class="popups">
			<view class="popup-vw">
				<view class="popup-vw-view" @click="tup">
					<image src="../../../static/白图片.png" mode=""></image>
					<text>图片</text>
				</view>
				<view class="popup-vw-view" @click="wenj">
					<image src="../../../static/白文件.png" mode=""></image>
					<text>文件</text>
				</view>
			</view>
		</view>
	</van-popup>
</template>

<script>
	import { token, serverURL, } from '../../../services/httpService';
	import { uploadimg, getUser, uploadfile, upload_image } from '../../../utils/utils';
	import Toast from '@vant/weapp/dist/toast/toast';
	export default {
		data() {
			return {
				scrollTop: 0,
				sms: '',
				open: false, // 图片文件弹出层
				list: [], //发送过的数组
				user: [], // 用户信息
				messageList: [], // 服务器传回的信息
			};
		},
		onLoad() {
			this.connect();
			getUser((res) => {
				this.user = res.data.user
			})
		},
		onUnload() {
			uni.closeSocket(function(res) {
				console.log('WebSocket 已关闭！');
			});
		},
		methods: {
			// 打赏弹出层
			// openshang () {
				
			// },
			// 打开文件弹出层
			opens () {
				this.open = true;
			},
			// 关闭文件弹出层
			onClose() {
				this.open = false;
			},
			// 输入框
			inputHandler (e) {
				this.sms = e.detail.value
				const content = this.sms.trim();
				if (content) {
					this.faSocket(this.sms)
					this.list.push(content);
					// 清空输入框
					this.$nextTick(() => {
					  this.sms = '';
					});
				}
			},
			// 图片逻辑
			tup () {
				let that = this
				uploadimg('2', (data) => {
					console.log('data', data);
					if (data.data.status == 1) {
						// 上传图片
						uni.chooseImage({
							count: 2,
							sourceType: "album",
							success(res) {
								// console.log('成功',res);
								// 获取本地图片地址
								console.log('本地图片',res.tempFilePaths[0]);
								const tempFilePaths = res.tempFilePaths[0]
								upload_image(tempFilePaths, (res) => {
									console.log('上传图片',res);
								})
								// console.log(tempFilePaths);
								// // 判断是否有多个循环上传
								// tempFilePaths.forEach((path, index) => {
								// 	that.faSocket(path, '2')
								// })

							},
							fail(e) {
								console.log('失败', e);
							}
						})
					} else {
						Toast('您不能上传图片')
					}
				})
			},
			// 文件逻辑
			wenj () {
				let that = this
				uploadimg('3', (data) => {
					console.log('data', data);
					if (data.data.status == 1) {
						uni.chooseFile({
							count: 2,
							sourceType: "album",
							success(res) {
								console.log('成功',res);
							},
							fail(e) {
								console.log('失败', e);
							}
						})
					} else {
						Toast('您不能上传图片')
					}
				})
			},
			// socket
			connect: function () {
				let that = this;
				uni.connectSocket({
					url: "ws://qlv.ftnet241.cn:30003",
					header: {
						Authorizationpas: `Bearer ${token}`,
					},
					success(res) {
						console.log('链接成功')
					},
					fail(e) {
						console.log('发送失败', e);
					}
				})
				uni.onSocketOpen(function() {
					console.log('连接WebSocket，onSocketOpen');
					// 需要验证身份
					uni.sendSocketMessage({
						data: JSON.stringify({
							type: 'login',
							corrid: '3',
							token: token,
						}),
						success() {
							// 保持链接
							let ping = setInterval(function() {
								console.log('重连1');
								uni.sendSocketMessage({
									data: JSON.stringify({
										type: "ping"
									})
								})
							}, 2500)
							this.ping = ping;
						},
						fail(e) {
							console.log('发送失败', e);
						}
					})
					uni.onSocketMessage(function(res) {
						let data = JSON.parse(res.data);
						console.log('收到服务器内容', data);
						if (data) {
							that.messageList.push(...data);
							console.log('服务器更新后that.messageList', that.messageList);
							setTimeout(function() {
								uni.$on('scroll-to-bottom', this.scrollToBottom);
							}, 500)
						}
					});
				})
			},
			// 发送消息
			faSocket(msn, intype = "1") {
				let that = this;
				uni.sendSocketMessage({
					data: JSON.stringify({
						type: 'chat',
						intype: intype,
						corrid: '3',
						msn: msn,
					}),
					success(e) {
						console.log('发送成功', e);
					},
					fail(e) {
						console.log('发送失败', e);
					}
				})
			},
			// 滑动到页面底部
			scrollToBottom() {
			  uni.$emit('scroll-to-bottom');
			  var height = uni.getSystemInfoSync().windowHeight;
			  var query = uni.createSelectorQuery();
			  query.select('#scroll-view').boundingClientRect();
			  query.exec((res) => {
			    uni.pageScrollTo({
			      scrollTop: res[0].height - height
			    });
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.aa {
		height: 50px;
	}
	.chatPage {
		display: flex;
		flex-direction: column;
		background-color: #EDEDED;
	}
	.top {
		width: 100vw;
		height: 40px;
		background-color: yellow;
	}
	.top-vw {
		margin: 0 auto;
		width: 95vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.title {
		font-weight: bold;
		display: flex;
		margin-left: 30px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.title-text {
		font-size: 12px;
		font-weight: normal;
		color: #acacac;
	}
	.title-text-two {
		margin: 0 10px 0 5px;
	}
	
	.content {
		width: 100%;
		display: flex;
		padding: 40rpx 0rpx;
		box-sizing: border-box;
	}
	
	.fixed-container {
		width: 100vw;
		height: 50px;
		background-color: #EDEDED;
	  position: fixed;
		left: 0;
	  bottom: env(safe-area-inset-bottom); /* Android, iOS 11.2+, Safari 13.4+ */
	  // padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.scroll-Y {
		margin: 5px auto;
		width: 100vw;
		height: 1130rpx;
		// background-color: gray;
	}
	
	.fixed-container-vw{
		width: 90vw;
		height: 30px;
	}
	
	.uni-input {
		width: 300px;
		height: 30px;
		background-color: white;
		border-radius: 8px;
		margin-left: 10px;
	}
	
	// ::v-deep.input-placeholder {
	// 	margin-left: 10px;
	// }
	
	.fixed-container-icon {
		margin-top: 5px;
		margin-right: 8px;
	}
	
	.itemimage {
		margin: 0 16rpx;
		width: 84rpx;
		height: 84rpx;
		opacity: 1;
		border-radius: 12rpx;
	}
	
	.item_name1 {
		width: 99%;
		display: flex;
		flex-direction: row-reverse;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 30rpx;
		color: rgba(0, 0, 0, 1);
		text-align: right;
		margin-bottom: 20px;
	}

	.item_name2 {
		width: 99%;
		font-size: 26rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 30.48rpx;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		margin-bottom: 20px;
	}
	
	.item_txt1 {
		max-width: 70%;
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
		padding: 24rpx;
		border-radius: 12rpx 0px 12rpx 12rpx;
		background: #d6ebfe;
	}

	.item_txt2 {
		max-width: 70%;
		// width: calc(100% - 84rpx);
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 0px 12rpx 12rpx 12rpx;
	}
	
	.itemBox1 {
		flex-direction: row-reverse;
	}

	.itemBox2 {
		flex-direction: row;
	}
	
	.item_txt2 {
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
		padding: 24rpx;
		border-radius: 12rpx 0px 12rpx 12rpx;
		background: #d6ebfe;
	}

	.item_txt1 {
		display: inline-block;
		word-break: break-all;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 36rpx;
		color: #383838;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 0px 12rpx 12rpx 12rpx;
	}

	.image2{
		width: 20px;
		height: 20rpx;
		border-radius: 12rpx;
	}
	
	
	.popups {
		display: flex;
		justify-content: center;
	}
	.popup-vw {
		width: 354px;
		height: 86px;
		margin-top: 30px;
		display: flex;
		align-items: center;
	}
	.popup-vw-view {
		width: 42px;
		height: 60px;
		font-size: 12px;
		color: #383838;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 20px;
	}
	.popup-vw-view > image {
		width: 42px;
		height: 42px;
	}
	.popup-vw-view > text {
		margin-top: 3px;
	}
	
	.dashang {
		width: 36px;
		height: 36px;
		position: fixed;
		right: 12px;
		bottom: 104px;
	}
</style>